var recommendedPhotos = "";

function addOrRemovePhoto(value, checked) {
    var photoIds = recommendedPhotos;
    if (checked) {
        if (photoIds == null || photoIds.length == 0) {
            recommendedPhotos = (value);
        } else {
            recommendedPhotos = (recommendedPhotos + ";" + value);
        }
    } else {
        var photos = photoIds.split(";");
        if (photos == null || photos == undefined) {
            recommendedPhotos = "";
        } else {
            var temp = "";
            for (var i = 0; i < photos.length; i++) {
                if (photos[i] != value) {
                    if (temp.length == 0) {
                        temp = photos[i];
                    } else {
                        temp = ";" + photos[i];
                    }
                }
            }
            recommendedPhotos = temp;
        }
    }
}

function addRecommendedPhotos() {
    if ($("#photoIds").val().length == 0) {
        $("#photoIds").val(recommendedPhotos);
    } else {
        $("#photoIds").val($("#photoIds").val() + ";" + recommendedPhotos);
    }
    recommendedPhotos = "";
    $("#photoSequence").html("");
    $("#myPhotoSequence").html("<div>My Story Sequence:</div>");
    var photos = $("#photoIds").val().split(";");
    if (photos == null || photos == undefined) {
        $("#myPhotoSequence").html($("#myPhotoSequence").html() + "<img width=\"50\" height=\"50\" src=\"RenderPhoto?photoId=" + $("#photoIds").val() + "\"/>");
    } else {
        for (var i = 0; i < photos.length; i++) {
            $("#myPhotoSequence").html($("#myPhotoSequence").html() + "<img width=\"50\" height=\"50\" src=\"RenderPhoto?photoId=" + photos[i] + "\"/>");
        }
    }
}

function submitFormUpload() {
    $("#storytellingForm").submit();
}

function photosQuery() {
    recommendedPhotos = "";
    $("#photoSequence").hide();
    var keyword = $("#name").val();
    if (keyword.length == 0) {
        return;
    }
    $.ajax({
        type: "post",
        url: "PhotoQuery",
        data: {keyword: keyword},
        dataType: "xml",
        success: function (data, textStatus, jqXHR) {
            var success = $(data).find("success").text();
            var message = $(data).find("message").text();
            if (success == "true") {
                $("#photoSequence").html("<div>Recommended Photos:</div>");
                $(data).find("photo").each(function () {
                    var photo_id = $(this).find("id").text();
                    var photo_name = $(this).find("name").text();
                    var photo_date = $(this).find("date").text();
                    var photo_user_name = $(this).find("user_name").text();
                    $("#photoSequence").html($("#photoSequence").html() + "<div id=\"recommendedPhotoDiv\"><input type=\"checkbox\" id=\"photo_id_" + photo_id + "\" onclick=\"addOrRemovePhoto(this.value, this.checked);\" value=\"" + photo_id + "\" /><img width=\"50\" height=\"50\" src=\"RenderPhoto?photoId=" + photo_id + "\"/></div>");
                });
                $("#photoSequence").html($("#photoSequence").html() + "<input type=\"button\" id=\"addChosenPhotos\" onclick=\"addRecommendedPhotos();\" value=\"Add Checked Photos\" />");
                $("#photoSequence").show();
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $("#photoQuerySubmit").html(textStatus);
        },
        beforeSend: function (jqXHR, settings) {
            $('#photoQuerySubmit').attr("disabled", true);
        },
        complete: function (jqXHR, textStatus) {
            $('#photoQuerySubmit').attr("disabled", false);
        }
    });
}

$(document).ready(function () {
    $("#storytellingSubmit").click(function () {
        submitFormUpload();
    });
    $("#photoSequence").hide();
    $("#photoQuerySubmit").click(function () {
        photosQuery()
    });
    $("#myPhotoSequence").html("<div>My Story Sequence</div>");
});